<template>
  <div class="admin-dashboard">
    <el-row>
      <el-col :span="6">
        <div class="user-info">
          <img src="@/assets/index/avatar.png" alt="Avatar" class="avatar">
          <h3>{{ userInfo.name }}</h3>
          <p>{{ currentTime }}</p>
          <p>{{ userInfo.os }}</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="recent-logins">
          <h3>最近登录记录</h3>
          <el-table :data="recentLogins" style="width: 100%">
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column prop="loginTime" label="登录时间"></el-table-column>
            <el-table-column prop="ipaddr" label="IP地址"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="function-modules">
      <el-col :xs="12" :sm="6" v-for="module in functionModules" :key="module.name">
        <el-card class="module-card" @click.native="handleModuleClick(module.name)">
          <div slot="header" class="clearfix">
            <span>{{ module.name }}</span>
          </div>
          <div class="module-content">
            <i :class="module.icon" class="module-icon"></i>
            <p>{{ module.description }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--    <el-row>-->
    <!--      <el-col :span="24">-->
    <!--        <div class="data-chart">-->
    <!--          <h3>用户数量变化趋势</h3>-->
    <!--          <div id="userCountChart"></div>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import { list } from "@/api/monitor/logininfor";
export default {
  name: 'AdminDashboard',
  data() {
    return {
      userInfo: {
        name: 'admin',
        os: 'Windows 11'
      },
      // currentTime: this.getCurrentTime(),
      currentTime: '',
      recentLogins: [],
      functionModules: [
        { name: '电子档案管理', icon: 'el-icon-document', description: '管理电子档案' },
        { name: '电子档案查询', icon: 'el-icon-search', description: '查询电子档案' },
        { name: '通知管理', icon: 'el-icon-bell', description: '管理系统通知' },
        // 添加更多功能模块
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 3,
        ipaddr: undefined,
        userName: undefined,
        status: undefined
      }
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getCurrentTime(); // 初始化时间
    setInterval(this.getCurrentTime, 1000); // 每秒更新时间
  },
  beforeDestroy() {
    // 清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
  methods: {
    getCurrentTime() {
      this.currentTime = new Date().toLocaleTimeString();
    },
    initUserCountChart() {
      // 使用 echarts 或其他图表库初始化用户数量变化趋势图表
      // 这里只是一个示例,实际实现需要根据数据源进行修改
      var chart = this.$echarts.init(document.getElementById('userCountChart'));
      chart.setOption({
        xAxis: {
          type: 'category',
          data: ['2023', '2024']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [100, 120],
            type: 'line'
          }
        ]
      });
    },
    getList(){
      list(this.queryParams).then(response=>{
        this.$data.recentLogins=response.rows;
      });
    },
    handleModuleClick(moduleName) {
      // 根据模块名称执行相应的跳转逻辑
      switch (moduleName) {
        case '电子档案管理':
          this.$router.push({
            path: '/dangan/comuser',
            icon:'/electronic-file-management'});
          break;
        case '电子档案查询':
          this.$router.push({
            path: '/dangan/search',
            icon: '/electronic-file-query'});
          break;
        case '通知管理':
          this.$router.push('/notification-management');
          break;
        // 添加其他模块的跳转逻辑
        default:
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-dashboard {
  padding: 20px;

  .user-info {
    text-align: center;
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 10px;
    }
  }

  .recent-logins {
    h3 {
      margin-bottom: 10px;
    }
  }

  .function-modules {
    margin-top: 20px;
    .module-card {
      height: 150px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .module-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .module-icon {
          font-size: 32px;
          margin-bottom: 10px;
        }
      }
    }
  }

  .data-chart {
    margin-top: 20px;
    #userCountChart {
      height: 400px;
    }
  }
}
</style>
